<template>
  <div>
    <div class="user-list">
      <el-form :inline="true" :model="userForm" class="demo-form-inline">
        <el-form-item label="处理状态">
          <el-select v-model="userForm.sysProductStatus" placeholder="请选择">
            <el-option label="请选择" value="" />
            <el-option label="已处理" value="0" />
            <el-option label="未处理" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-select v-model="userForm.sysProductType" placeholder="请选择">
            <el-option label="请选择" value="" />
            <el-option label="后台权限处理" value="0" />
            <el-option label="其他" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" v-if="buttons.productionAdd" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData.list" border>
        <el-table-column label="登记人" align="center">
          <template slot-scope="scope">
            {{ scope.row.sysProductName }}
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <viewer>
              <img :src="tableData.list[scope.$index].sysProductImg" width="100%">
            </viewer>
          </template>
        </el-table-column>
        <el-table-column label="详细说明" align="center">
          <template slot-scope="scope">
            {{ scope.row.sysProductDetail }}
          </template>
        </el-table-column>
        <el-table-column label="答复" align="center">
          <template slot-scope="scope">
            {{ scope.row.sysProductReply }}
          </template>
        </el-table-column>
        <el-table-column label="产品类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.sysProductType === '0'">后台权限管理</span>
            <span v-else>其他</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="处理时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column label="处理状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.sysProductStatus === '0'" type="success" disabled>已处理</el-button>
            <el-button v-else type="danger" plain disabled>未处理</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" v-if="buttons.productionHandle && scope.row.sysProductStatus === '1'" plain style="padding: 5px 10px;margin-left: 0" @click="handleStatus(scope.$index, scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="tableData.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <production-add :user-add="userAdd" @centerDialogVisibleUserAdd="centerDialogVisibleUserAdd" />
  </div>
</template>

<script>
import ProductionAdd from './component/ProductionAdd'
import production from '@/api/axios/api/production/production'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})
export default {
  name: 'Production',
  components: {
    ProductionAdd
  },
  data () {
    return {
      buttons: {
        productionAdd: false,
        productionHandle: false,
      },
      tableData: {},
      sysUserName: '',
      sysUserUuid: '',
      userAdd: {
        centerDialogVisibleUserAdd: false
      },
      userForm: {
        sysProductStatus: '',
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  created () {
    this.userPageList()
    if (this.$route.meta.buttons) {
      this.buttons = Object.assign(this.buttons, this.$route.meta.buttons)
    }
  },
  methods: {
    onSubmit () {
      this.userPageList()
    },
    handleSizeChange (pageSize) {
      this.userPageList()
    },
    handleCurrentChange (pageNum) {
      this.userForm.pageNum = pageNum
      this.userPageList()
    },
    handleDetail (index, row) {
      this.userDetail.centerDialogVisibleUserDetail = true
      production.userDetail(row).then(value => {
        this.userDetail.userInfo = value.data
      })
    },
    centerDialogVisibleUserEdit () {
      this.userEdit.centerDialogVisibleUserEdit = false
      this.userPageList()
    },
    handleAdd (index, row) {
      this.userAdd.centerDialogVisibleUserAdd = true
    },
    centerDialogVisibleUserAdd () {
      this.userAdd.centerDialogVisibleUserAdd = false
      this.userPageList()
    },
    userPageList () {
      production.bugPage(this.userForm).then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .user-list
    margin-left 1%
    padding-top 10px
    overflow hidden
</style>
